<template>
	<view>
		
		
		
		<view class="index-top-head" :style="{top:`${statusBarHeight+20}px`}">
			<view class="know-flex know-space-between know-align-center">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
					<view class="index-top-head-imgBox know-flex know-align-center konw-center">
						<image src="/static/calendar.png" class="index-top-head-img"></image>
						<text class="font-18 color-FFFFFF font-weight-bold index-top-head-text">{{date | splitFun}}</text>
					</view>
				</picker>
							 
				<view class="index-top-head-rightImg" @click="goPageFun('/pages/setUp/index')">
					<image src="/static/tj.png" mode="" class="index-top-head-rightImg"></image>
				</view>
			</view>
		</view>
		
		<swiper class="swiper-item">
			<swiper-item>
				<view class="swiper-item">
					<view class="index-top know-flex konw-center know-align-center konw-column color-FFFFFF font-weight-bold" :class="(quota-outNum).toFixed(2)<=0?'bg-base2':(quota-outNum).toFixed(2)<=100?'bg-base1':'bg-base'">
						<view class="font-24">预计当月可用</view>
						<view>
							<text class="font-24">￥</text>
							<text class="font-120">{{(quota-outNum).toFixed(2)||0}}</text>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="index-top know-flex konw-center know-align-center konw-column color-FFFFFF font-weight-bold" :class="(quota-outNum).toFixed(2)<=0?'bg-base2':(quota-outNum).toFixed(2)<=100?'bg-base1':'bg-base'">
						<view class="font-24">累计使用</view>
						<view>
							<text class="font-24">￥</text>
							<text class="font-120">{{(outNum).toFixed(2)||0}}</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		
		
		
		
		
		<view class="index-list" :style="{marginBottom:`${bottomHenght}px`}">
			<block v-for="(item,index) in list" :key="index">
				<view class="color-black9  bg-FFFFFF font-48 font-weight-bold index-list-time know-flex know-space-between know-align-end"
				 :style="{paddingTop:`${statusBarHeight}px`}">
					<text>{{item.time | listSplitFun}}日</text>
					<view class="font-24 color-black6">
						<text style="margin-right: 20rpx;"><text class="index-list-tips bg-EEEEEE">收</text>{{(item.in).toFixed(2) || 0.00}} </text>
						<text><text class="index-list-tips bg-EEEEEE">支</text>{{(item.out).toFixed(2) || 0.00}} </text>
					</view>
				</view>
				<block v-for="(v,i) in item.item" :key="i">
					<view class="index-list-item know-flex know-space-between know-align-center font-weight-bold color-black3"
					 @longpress="longpressFun">
						<view class="index-list-item-left know-flex know-align-center">
							<view class="index-list-icon">
								<image src="/static/logo.png" mode="" class="index-list-icon"></image>
							</view>
							<view class="index-list-title font-28">
								{{v['out_in_type'].name}} <text class="font-20 color-black9">{{v.remarks?`(${v.remarks})`:''}}</text>
							</view>
						</view>
						<view class="index-list-item-right font-50" :class="v.outAndIn?'color-base':'color-base1'">
							<text class="font-24" style="padding-right: 10rpx;">{{v.outAndIn?'+':'-'}}</text>{{(v.money).toFixed(2)}}
						</view>
					</view>
				</block>
			</block>
			<view class="text-center font-24 color-black9 more font-weight-bold">
				这个月你只记录了{{list.length}}天喔~
			</view>
		</view>
		<view class="know-flex konw-column know-align-center konw-center index-bottom bg-FFFFFF" id="addList">
			<view class="index-add bg-base know-flex know-align-center konw-center color-FFFFFF font-50 clickClass" @click="goPageFun('/pages/add/index')">
				+
			</view>
			<view class="color-base font-24 font-weight-bold">记一笔帐</view>
		</view>
	</view>
</template>

<script>
	import {
		userLogin,
		getUserRecord,
		getUserInfo 
	} from '@/api/http/login.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				bottomHenght: 0,
				statusBarHeight: 0,
				list: [],
				date: currentDate,
				userInfo:{},
				quota:0,
				outNum:0
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			this.getUserRecordFun({
				yearAndMonth:this.date
			})

			try {
				let token = uni.getStorageSync('POOL_TOKEN')
				if (!token) {
					uni.reLaunch({
						url: '../login/index'
					})
				}
			} catch (e) {
				//TODO handle the exception
			}
			
			getUserInfo().then(res=>{
				this.userInfo = res.data
				this.quota = res.data.quota
			})
			
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},


			bindDateChange(e) {
				this.date = e.target.value
				this.getUserRecordFun({
					yearAndMonth:e.target.value
				})
			},


			goPageFun(url) {
				uni.navigateTo({
					url:url
				})
			},
			longpressFun() {
				uni.showModal({
					title: '提示',
					content: '是否删除该条记录?',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getUserRecordFun(data) {
				getUserRecord(data).then(res => {
					if (res.code == 200) {
						this.list = res.data.list
						this.outNum = res.data.outNum
					}
				})
			}
		},
		mounted() {
			const query = uni.createSelectorQuery()
			query.select('#addList').boundingClientRect(data => {
				this.bottomHenght = data.height
			}).exec();

		},
		filters: {
			splitFun(time) {
				let date = time.split("-")
				return date[1]
			},
			listSplitFun(time){
				let date = time.split("-")
				return date[2]
			}
		}
	}
</script>

<style lang="scss">
	.more {
		padding: 20rpx 0;
	}

	.index {
		&-top {
			height: 600rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;
			&-head {
				position: absolute;
				width: 94%;
				left: 3%;
				z-index: 999;
				&-imgBox {
					width: 50rpx;
					height: 50rpx;
					position: relative;
				}
				&-text {
					margin-top: 4rpx;
					// position: absolute;
					// top: calc((50rpx - 20rpx) / 2);
					// left: calc((50rpx - 20rpx) / 2);
				}

				&-img {
					width: 50rpx;
					height: 50rpx;
					position: absolute;
				}

				&-rightImg {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		&-list {
			margin-top: 30rpx;
			padding: 0 30rpx;

			&-tips {
				padding: 6rpx;
				border-radius: 8rpx;
				margin-right: 5rpx;
			}

			&-time {
				color: #EEEEEE;
				position: sticky;
				top: 0;
				padding: 30rpx 0;
				z-index: 2;
			}

			&-icon {
				width: 60rpx;
				height: 60rpx;
			}

			&-title {
				margin-left: 30rpx;
			}

			&-item {
				border-bottom: 2rpx solid #f5f5f5;
				padding: 30rpx 0;
			}
		}

		&-bottom {
			width: 100%;
			position: fixed;
			bottom: 0;
			z-index: 3;
			padding: 20rpx 0;
			box-shadow: 0px -1px 15px #EEEEEE;
		}

		&-add {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100%;
			margin-bottom: 15rpx;
		}
	}
	
	
	.swiper-item{
		height:600rpx ;
	}
</style>
